/**
 * Created by Ysssssss on 2021/4/26.
 */
import React, {forwardRef, useContext, useState} from 'react'
import { Input } from "antd";
import CustomizeModal, {CustomizeModalButton, CustomizeModalContext} from "@common/presentational/CustomizeModal";
import { cancelOrder } from "@sagas/shoppingMall/shoppingMallOrder";
import {useDispatch} from "react-redux";

const ShoppingMallRefundReasonModal = props => {
    const { callback } = props
    const [reason, setReason] = useState('')
    const { hide, params } = useContext(CustomizeModalContext)
    const dispatch = useDispatch()
    const { orderNumber } = params

    const handleReasonChange = e => setReason(e.currentTarget.value)

    const handleSubmit = () => {
        dispatch(cancelOrder({
            orderNumber,
            reason,
        }, () => {
            callback && callback()
            hide()
        }))
    }

    return (
        <>
            <Input.TextArea value={reason}
                            onChange={handleReasonChange}
                            rows={4}
                            placeholder="请输入退款原因"
                            style={{resize: 'none' }}
            />
            <CustomizeModalButton
                onOk={handleSubmit}
                onCancel={hide}
            />
        </>
    )
}


export default forwardRef((props, ref) => (
    <CustomizeModal title="退款原因" ref={ref}>
        <ShoppingMallRefundReasonModal {...props}/>
    </CustomizeModal>
))
